<template>
  <view class="container p-t-24">
    <view
      class="address"
      v-for="(item, index) in defaultList"
      :key="index"
      v-if="index < 1"
    >
      <view class="info">
        <view class="font-32 text-bold" >
          <text class="m-r-20">{{ item.name }}</text>
          <text class="">{{ item.mobile }}</text>
        </view>
        <view  class="font-24 c-60">{{ item.full_address}}{{ item.address}}</view>
      </view>
      <view class="bot">
        <view class="font-24 flex-y-center" @click="setDefault(item.id)">
          <image
            :src="$util.img('image/radio2.png')"
            mode=""
            class="radio"
          ></image>
          默认地址
        </view>
        <view class="flex">
          <view class="edit c-87" @click.stop="deleteAddress(item.id, index)">
            <i class="iconfont">&#xe74a;</i>
            删除
          </view>
          <view class="edit c-87" @click.stop="addAddress('edit', item.id)">
            修改
            <i class="iconfont">&#xe695;</i>
          </view>
        </view>
      </view>
    </view>

    <view class="m-24 font-30 text-bold" v-if="list.length > 0">其他地址</view>
    <view class="address" v-for="(item, index) in list" :key="index">
      <view class="info" @click="setDefault(item.id)">
        <view class="font-32 text-bold">
          <text class="m-r-20">{{ item.name }}</text>
          <text class="">{{ item.mobile }}</text>
        </view>
        <view class="font-24 c-60">{{ item.full_address }}{{ item.address}}</view>
      </view>
      <view class="bot">
        <view
          class="font-24 flex-y-center"
          v-if="item.is_default == 0"
          @click="setDefault(item.id)"
        >
          <image
            :src="$util.img('image/radio.png')"
            mode=""
            class="radio"
          ></image>
          默认地址
        </view>
        <view class="flex">
          <view class="edit c-87" @click.stop="deleteAddress(item.id, index)">
            <i class="iconfont">&#xe74a;</i>
            删除
          </view>
          <view class="edit c-87" @click.stop="addAddress('edit', item.id)">
            修改
            <i class="iconfont">&#xe695;</i>
          </view>
        </view>
      </view>
    </view>
    <emptyData :width="empty.width" :height="empty.height" :text="empty.text" :icon="empty.icon" :marginTop="empty.marginTop" v-if="list.length == 0"></emptyData>

    <view class="footer fixfooter" :class="{ 'bottom-safe-area': isIphoneX }">
      <view
        class="submit"
        @click="$util.redirectTo('/pages/addAddress/addAddress')"
        >新增地址</view
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      defaultList: [],
      list: [],
      isIphoneX: false, //判断手机是否是iphoneX以上
      back: "", // 返回页
      redirect: "redirectTo", // 跳转方式
      empty: {
					width: 135,
					height: 134,
					text: '暂无数据',
					icon: '/image/emptyAddress.png',
					marginTop: 100
				},
    };
  },
  onLoad(option) {
    this.isIphoneX = this.$util.uniappIsIPhoneX();

    if (option.back) {
      this.back = option.back;
      uni.setStorageSync("addressBack", option.back);
    }
    if (option.redirect) this.redirect = option.redirect;
  },
  onShow() {
    this.getList();
  },
  methods: {
    /* 地址跳转 */
    addAddress(type, id) {
      let data = {};
      if (type == "edit") data.address_id = id;
      if (this.back) data.back = this.back;
      this.$util.redirectTo("/pages/addAddress/addAddress", data);
    },
    /* 删除地址信息 */
    deleteAddress(id, is_default) {
      uni.showModal({
        title: "操作提示",
        content: "确定要删除该地址吗？",
        success: (res) => {
          if (res.confirm) {
            if (is_default == 1) {
              this.$util.showToast({
                title: "默认地址，不能删除",
              });
              return;
            }
            this.$api.sendRequest({
              url: "/api/memberaddress/delete",
              data: {
                id: id,
              },
              success: (res) => {
                if (res.code == 0) {
                  this.$util.showToast({
                    title: "删除成功",
                  });
                } else {
                  this.$util.showToast({
                    title: "删除失败",
                  });
                }
                this.getList();
              },
            });
          }
        },
      });
    },
    getList() {
      this.$api.sendRequest({
        url: "/api/memberaddress/page",
        data: {
          page: 1,
          page_size: 30,
        },
        success: (res) => {
          if (res.code == 0) {
            var arr = res.data.list;
            var newDefault = [];
            arr.forEach((v, k) => {
              if (v.is_default == 1) {
                newDefault.push(v);
                arr.splice(k, 1);
              }
            });
            this.list = arr;
            this.defaultList = newDefault;
          }
        },
      });
    },
    setDefault(id) {
      this.$api.sendRequest({
        url: "/api/memberaddress/setdefault",
        data: {
          id: id,
        },
        success: (res) => {
          if (res.code == 0) {
            if (this.back != "") {
              let jump = true;
              let arr = getCurrentPages().reverse();
              for (let i = 0; i < arr.length; i++) {
                if (this.back.indexOf(arr[i].route) != -1) {
                  jump = false;
                  uni.navigateBack({
                    delta: i,
                  });
                  break;
                }
              }
              if (jump) {
                this.$util.redirectTo(this.back, {}, "redirectTo");
              }
            } else {
              this.$util.showToast({
                title: "修改默认地址成功",
              });
            }
            this.getList();
          } else {
            this.$util.showToast({
              title: res.message,
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.address {
  margin: 0 24rpx 24rpx;
  background-color: #fff;
  padding-bottom: 30rpx;
  border-radius: 20rpx;
  .info {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    border-bottom: 1px solid #eeeefd;
  }
  .radio {
    width: 34rpx;
    height: 34rpx;
    margin-right: 10rpx;
  }
  .bot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20rpx 30rpx 0;
    .edit {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      margin-left: 40rpx;
      image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
      }
    }
  }
  .iconfont {
    color: #878da1;
    font-size: 30rpx;
  }
}
</style>
